<template>
	<view class="container u-skeleton">
		<view class="line"></view>
		<view class="page-content">
			<view class="contenttop">
				<view class="allrates">
					<text class="ratetitle  u-skeleton-rect">综合评分</text>
				    <text class="ratesnum">5.0</text>
					<u-rate :count="maxrate" active-color="#ffb200" v-model="ratecount" size="25" :disabled="true" class="u-skeleton-rect"></u-rate>
				</view>
				<view class="ratenav u-skeleton-rect">
					<u-tabs-swiper ref="ratetabs" :list="tablist" gutter="0" active-color="#FFB200" inactive-color="#888888" :bold="false"></u-tabs-swiper>
				</view>
			</view>
			<view class="contentbottom" :style="{height:scrollviewHeight+'rpx'}">
				<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item v-for="(tabitem,tabindex) in tablist" :key="tabindex">
						<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',paddingTop:'20rpx'}">
							<text class="commititem-title u-skeleton-rect">用户评价(23)</text>
							<view class="commititem" v-for="(commititem,commitindex) in committexts" :key="commitindex">
								
								<view class="commit-user">
									<u-avatar src="/static/avatar.jpg" size="90" class="u-skeleton-circle"></u-avatar>
									<view class="commituser-time">
										<text class="commitname u-skeleton-rect">工地吴彦祖</text>
										<text class="committime u-skeleton-rect">08-24</text>
									</view>
								</view>
								<view class="commit-rate">
									<text class="u-skeleton-rect">评分</text>
									<u-rate :count="maxrate" active-color="#ffb200" v-model="ratecount" size="25" :disabled="true" class="u-skeleton-rect"></u-rate>
								</view>
								<view class="commit-add">
									<text class="u-skeleton-rect">江苏省徐州市风华园</text>
								</view>
								<view class="commit-text u-skeleton-rect">
									<text>{{showcommitText(commitindex)}}</text>
									<text class="showall" v-on:click="showAlltexts(commitindex)" v-if="!isShowall[commitindex]">展开</text>
								</view>
								<view class="commitimages u-skeleton-rect" :class="{'oneimg':commititem.images.length==1,'twoimg':commititem.images.length==2,'moreimg':commititem.images.length>2}">
									<image :src="commitimage" mode="" v-for="(commitimage,imagesindex) in commititem.images" v-on:click="previewImages(commitindex,imagesindex)"></image>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<u-skeleton :loading="loading" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
				    name: `全部(${80})`
				}, {
					name: `最新(${30})`
				}, {
					name: `差评(${1})`
				}],
				maxrate:5,
				ratecount:5,
				tabcurrent:0,
				loading:true,
				//模拟数据 评价文本
				committexts:[
					{
						text:'师傅干活干净利索，完工速度快，师傅辛苦了！师傅干活干净利索，完工速度快，师傅辛苦了！',
						images:['/static/=0.jpg']
					},
					{
						text:'师傅干活干净利索，完工速度快，师傅辛苦了！师傅干活干净利索，完工速度快，师傅辛苦了！师傅干活干净利索，完工速度快，师傅辛苦了！师傅干活干净利索，完工速度快，师傅辛苦了！',
						images:['/static/=0.jpg','/static/=0.jpg']
					},
					{
						text:'师傅干活干净利索，完工速度快，师傅辛苦了！师傅干活干净利索，完工速度快，师傅辛苦了！',
						images:['/static/=0.jpg','/static/=0.jpg','/static/=0.jpg']
					}
				],
				isShowall:[false,false,false]
			}
		},
		onLoad() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=windowHeight/(uni.upx2px(windowHeight)/windowHeight)-240;
			uni.showLoading({
				title:'加载中'
			})
			setTimeout(()=>{
				this.loading=false;
				uni.hideLoading()
			},1000)
		},
		methods: {
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.ratetabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.ratetabs.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			//展开评论文本
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			previewImages(commitindex,imagesindex){
				const that=this;
				console.log(commitindex,imagesindex)
				console.log(that.committexts[commitindex].images)
				uni.previewImage({
					current:imagesindex,
					urls:that.committexts[commitindex].images,
					indicator:"default"
				})
			}
		},
		computed:{
			showcommitText(){
				// const that=this;
				 return (index)=>{
					 if(this.isShowall[index] || this.committexts[index].text.length<=80)
					 {
						 // this.$set(this.isShowall,index,true);
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.committexts[index].text;
					 }else{
						 return this.committexts[index].text.substr(0,79)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		min-height: 100%;
		.line{
			width: 100%;
			height: 15rpx;
			background-color: #f3f3f3;
		}
		.page-content{
		   width: 100%;
		   height: auto;
		   padding-top: 20rpx;
		   
		}
		.contenttop{
		   width: 100%;
		   height: auto;
		   padding-bottom: 20rpx;
		   border-bottom: 1rpx solid #F1F1F1;
		   display: flex;
		   flex-wrap: wrap;
		   justify-content: center;
		   .allrates{
			   width: 680rpx;
			   height: 80rpx;
			   display: flex;
			   align-items: center;
			   flex-wrap: wrap;
		   }
		   .ratetitle{
			   font-size: 30rpx;
			   font-weight: blod;
		   }
		   .ratenav{
			   width: 680rpx;
			   margin-top: 10rpx;
		   }
		   .ratesnum{
			   font-size: 40rpx;
			   margin-left: 20rpx;
		   }
		}
		.contentbottom{
			width: 100%;
			swiper{
				width: 100%;
				height: 100%;
			}
			.commititem{
				width: 100%;
				border-bottom: 1rpx solid #F1F1F1;
				padding-bottom: 20rpx;
				padding-top:20rpx
			}
			.commititem-title{
				margin-left: 35rpx;
			}
			.commit-user{
				width:680rpx;
				height: auto;
				display: flex;
				align-items: center;
				margin: auto;
				margin-top: 20rpx;
			}
			.commituser-time{
				margin-left: 20rpx;
				display: flex;
				flex: 1;
				flex-wrap: wrap;
			}
			.commitname{display: block;width:100%;font-size: 30rpx;}
			.committime{display: block;width:100%;font-size:23rpx;color: #888888;margin-top: 10rpx;}
			.commit-rate{
				display: flex;
				align-items: center;
				margin-left: 35rpx;
				margin-top: 20rpx;
			}
			.commit-add{
				margin-left: 35rpx;
				margin-top:20rpx;
				text{
					font-size: 25rpx;
					color:#888;
				}
			}
			.commit-text{width: 680rpx;margin: auto;margin-top: 20rpx;}
			.showall{color: #2979FF;}
			.commitimages{
				width: 680rpx;
				height:auto;
				margin: auto; 
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.oneimg image{
				width: 300upx;
				height: 500upx;
			}
			.twoimg image{
				width: 327upx;
				height: 250upx;
			}
			.moreimg image{
				width: 220upx;
				height: 235upx;
			}
		}
	}
</style>
